<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            transition: all .5s;width: 100px;height: 50px;background: yellow;
        }
        .a:hover{
            transform: rotate(30deg);
            transform: rotate(-30deg);
            transform: rotateX(20deg);
            transform: rotate3d(10, 20, 30, 60deg);
        }
        .b:hover{
            transform: skew(30deg);
            transform: skew(270deg);
        }
        .c:hover{
            transform: scale(-1);
        }
        .d:hover{
            transform: translate(30px, -30px);
        }
        #box{
            width: 234px;
            height: 300px;
            border: 1px solid;
            margin: 30px auto;
            transition: all .3s;
        }
        #box:hover{
            box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
            transform: translateY(-2px);
        }
        #big{
            width: 800px;
            height: 800px;
            background: pink;
            position: relative;
        }
        #small{
            width: 200px;
            height: 200px;
            background: darkred;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <!-- 
        1. 变形
            transform：none      不变形，默认
                       rotate    旋转 单位：deg 角度
                       skew      扭曲 单位：deg 角度(90 * 奇数会扭成一条线)
                       scale      中心缩放 单位:基数
                       translate  位移 单位:px 或 % 相对于自身开始位移
     -->
    <div class="a"></div><hr>
    <div class="b"></div><hr>
    <div class="c"></div><hr>
    <div class="d"></div><hr>
    <div id="box"></div>
    <div id="big">
        <div id="small"></div>
    </div>
</body>
</html>